import React, { useEffect, useState } from 'react';
import { Button, Tag, Skeleton, message } from 'antd';
import { ArrowLeftOutlined, DownloadOutlined } from '@ant-design/icons';
import { history, useParams } from '@umijs/max';
import { CelebrityStageCutInfo, getCelebrityStageCutInfoById } from '@/services/CelebrityStageCutInfo';
import styles from './detail.less';

const StageDetail: React.FC = () => {
  const { idBase64 } = useParams<{ idBase64: string }>();
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState<CelebrityStageCutInfo | null>(null);

  // 获取详情数据
  useEffect(() => {
    const fetchData = async () => {
      if (!idBase64) return;
      try {
        const id = atob(idBase64);
        setLoading(true);
        const response = await getCelebrityStageCutInfoById(parseInt(id));
        setData(response);
      } catch (error) {
        message.error('获取舞台详情失败');
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [idBase64]);

  // 处理返回列表
  const handleBack = () => {
    history.back();
  };

  // 处理下载
  const handleDownload = () => {
    if (data?.videoInfo?.id) {
      window.open(`/api/file/download/${data.videoInfo.id}`, '_blank');
    }
  };

  // 处理字符串分割
  const splitString = (str?: string) => {
    if (!str) return [];
    return str
      .replace(/，/g, ',')
      .replace(/、/g, ',')
      .replace(/;/g, ',')
      .replace(/；/g, ',')
      .split(',')
      .map(item => item.trim())
      .filter(Boolean);
  };

  // 基本信息展示
  const BasicInfo = () => {
    if (!data) return null;

    return (
      <div className={styles.infoGrid}>
        <div className={styles.mainInfo}>
          <h1 className={styles.stageName}>{data.stageName}</h1>
        </div>

        <div className={styles.infoList}>
          {data.tags && (
            <div className={styles.infoItem}>
              <span className={styles.label}>标签</span>
              <span className={styles.value}>
                {splitString(data.tags).map((tag, index) => (
                  <Tag key={index} color="blue">{tag}</Tag>
                ))}
              </span>
            </div>
          )}
          {data.uploadDate && (
            <div className={styles.infoItem}>
              <span className={styles.label}>演出时间</span>
              <span className={styles.value}>{data.uploadDate}</span>
            </div>
          )}
          {data.cr && (
            <div className={styles.infoItem}>
              <span className={styles.label}>来源</span>
              <span className={styles.value}>
                <Tag color="blue">{data.cr}</Tag>
              </span>
            </div>
          )}
          {data.duration && (
            <div className={styles.infoItem}>
              <span className={styles.label}>时长</span>
              <span className={styles.value}>{data.durationStr || data.duration}</span>
            </div>
          )}
        </div>
      </div>
    );
  };

  // 描述信息展示
  const Description = () => {
    if (!data?.description) return null;

    return (
      <div className={styles.description}>
        <h3 className={styles.sectionTitle}>演出简介</h3>
        <div className={styles.content}>{data.description}</div>
      </div>
    );
  };

  // 视频播放器
  const VideoPlayer = () => {
    if (!data?.videoInfo?.id) return null;

    return (
      <div className={styles.videoWrapper}>
        <video
          className={styles.video}
          controls
          poster={data.thumbnailId ? `/api/file/play/${data.thumbnailId}` : undefined}
          controlsList={data.downloadable === 1 ? undefined : 'nodownload'}
        >
          <source src={`/api/file/play/${data.videoInfo.id}`} type="video/mp4" />
          您的浏览器不支持视频播放。
        </video>
      </div>
    );
  };

  return (
    <div className={styles.pageContainer}>
      <div className={styles.pageHeader}>
        <Button
          icon={<ArrowLeftOutlined />}
          onClick={handleBack}
          type="link"
          // className={styles.backButton}
        >
          返回列表
        </Button>
      </div>

      <div className={styles.content}>
        {loading ? (
          <Skeleton active paragraph={{ rows: 10 }} />
        ) : (
          <>
            <VideoPlayer />
            <div className={styles.infoSection}>
              <BasicInfo />
              <Description />
            </div>
          </>
        )}
      </div>
    </div>
  );
};

export default StageDetail; 